<template>
    <li v-if="item.children" class="sub-menu">
        <div class="sub-menu__title menu-item" @click="handleItemClick">
            <div class="menu-item__container">
                <div class="menu-item__container__content">
                    <div v-if="item.icon" class="icon">
                        <el-icon>
                            <component :is="item.svg"></component>
                        </el-icon>
                    </div>
                    <span class="title">{{ item.label }}</span>

                    <div class="icon">
                        <el-icon>
                            <component :is="item.svg"></component>
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>
        <ul class="menu">
            <MenuItem v-for="(children, index) in item.children" :item="children" :key="index"
                :on-close="props.onClose">
            </MenuItem>
        </ul>
    </li>

    <li v-else-if="item.visible || item.visible === undefined" class="menu-item" :class="{disabled: item.disabled}" @click="handleItemClick">
        <div v-if="!item.divided" class="menu-item__container">
            <div class="menu-item__container__content">
                <div v-if="item.svg" class="icon">
                    <el-icon>
                        <component :is="item.svg"></component>
                    </el-icon>
                </div>
                <span class="title">{{ item.label }}</span>
            </div>
        </div>

        <div v-else>
            <div class="menu-item__divider"></div>
        </div>
    </li>
</template>

<script lang="ts" setup>
import type { RightMenuItem } from './interfaceType'

const props = defineProps({
    item: {
        type: Object as () => RightMenuItem,
        required: true
    },
    onClose: {
        type: Function,
        default: () => { }
    }
})

const handleItemClick = computed(() => {
    return () => {
        if (props.item.disabled) {
            return
        }
        if (!props.item.onClick) {
            console.warn('onClick is not defined')
            props.onClose()
            return
        }
        if (props.item.children) {
            props.item.onClick()
            return
        }
        props.item.onClick()
        props.onClose()
    }
})

</script>

<style scoped lang="scss">
.sub-menu {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 0px 3px;

    .sub-menu__title {
        padding: 0;
    }

    .menu {
        position: absolute;
        margin-top: 2px;
        padding: 0;
        border-radius: 5px;
        background-color: rgb(187, 187, 187);
        box-shadow: 0 0 4px var(--context-menu-box-shadow);
        border: 1px solid var(--context-menu-border);
        width: fit-content;
        display: none;
    }

    &:hover {
        &>.menu {
            display: block;
        }

        &>.menu-item>.menu-item__container>.menu-item__container__content {
            color: var(--context-menu-hover-color);
            background-color: var(--context-menu-hover-background);
            border-radius: 5px;
        }
    }
}

.menu-item {
    padding: 0px 3px;
    cursor: pointer;
    list-style: none;

    &__container {
        display: flex;
        align-items: center;

        &__content {
            min-width: calc(100% - 24px);
            width: max-content;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;

            .icon {
                width: 1em;
                display: contents;
            }

            .title {
                margin-right: auto;
            }

            .icon+.title {
                margin-left: 5px;
            }
        }

        &:hover {
            color: var(--context-menu-hover-color);
            background-color: var(--context-menu-hover-background);
            border-radius: 5px;
        }
    }

    &__divider {
        height: 1px;
        margin: 4px 0;
        border-bottom: 1px solid var(--context-menu-border);
        width: calc(100% - 20px);
        margin-left: 10px;
    }
}

ul>li {
    &:first-child {
        padding-top: 3px;
    }

    &:last-child {
        padding-bottom: 3px;
    }
}

.disabled {
    cursor: not-allowed;
    color: var(--context-menu-border);

    &__container {
        .title {
            &:hover {
                color: var(--context-menu-border);
                background-color: transparent;
            }
        }
    }
}

.title {
    font-size: 14px;
}
</style>